<template>
  <div class="camera-config">
    <div class="camera-top">
      <span>您是否参与视频素材的拍摄呢？</span>
      <van-switch v-model="checked" size="20px" />
    </div>
    <div v-if="checked">
      <div class="list" v-if="checked">
        <div class="item"
          :class="{'active': value.isActive}"
          v-for="(value, key) in types" 
          :key="key" 
          @click="changeItem(key)">
          <span class="text" >{{ value.category_name }}</span>
        </div>
      </div>

      <div 
        v-for="(_item, _index) in list" 
        :key="_index + 'b'">
        <div class="type-list" v-if="_item.child.length">
          <div class="type-itme-wrapper">
            <div class="type-title">
              <span class="red-text" style="margin-right: 2px;">*</span>
              <span>{{_item.title }}</span>
              <span class="gray">(可多选)</span>
            </div>
            <div class="type-item" 
              :class="{'active': choosedIdList.includes(item.item_id)}"
              v-for="(item, index) in _item.child" 
              @click="chooseItem(item)"
              :key="index">
              {{ item.item_name }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { 
  findFilmingParticipation,
  updateFilmingParticipation,
  savefilmingParticipation,
  getListCategory, getItemList
} from '@/api/account'
import { Toast } from 'vant';
export default {
  data() {
    return {
      choosedIdList: [], // 已选择的id列表
      checked: true,
      types: [],
      keys: ['GOODS', 'PEOPLE', 'LOCATION'],
      list: {
        'GOODS': {
          title: '您可以去拍摄哪些货品呢？',
          child: []
        },
        "PEOPLE": {
          title: '您的团队/您自己有哪些角色能够出镜拍摄呢？',
          child: []
        },
        "LOCATION": {
          title: '您能在哪些场地取景呢？',
          child: []
        }
      },
    };
  },
  watch: {
    checked (val) {
      let str = val ? 'ON' : 'OFF'
      updateFilmingParticipation({
        filming_participation: str
      }).then(res => {})
    },
  },
  mounted () {
    this.search()
    this.findFilmingParticipation()
    document.title = '拍摄参与度'
  },
  methods: {
    findFilmingParticipation () {
      findFilmingParticipation().then(res => {
        if (res.filming_participation === 'ON') {
          this.checked = true
        } else {
          this.checked = false
        }
      })
    },
    chooseItem (item) {
      const _findIndex = this.choosedIdList.findIndex(i => i === item.item_id)
      if(_findIndex > -1) {
        this.choosedIdList.splice(_findIndex, 1)
      } else {
        this.choosedIdList.push(item.item_id)
      }
      // 如果有值就保存，如果没值就不参与视频拍摄
      if (this.choosedIdList.length) {
        this.savefilmingParticipation()
      } else {
        updateFilmingParticipation({
          filming_participation: 'OFF'
        }).then(res => {})
      }
    },
    savefilmingParticipation () {
      savefilmingParticipation({
        item_ids: this.choosedIdList
      }).then(res => {
        console.log('保存成功')
      })
    },
    changeItem (key) {
      console.log('change key:', key)
      key *= 1
      this.types.forEach(item => {
        item.isActive = false
      })
      this.types[key].isActive = true
      this.getItemList(this.types[key].category_id)
      this.$forceUpdate()
    },
    search () {
      getListCategory().then(res => {
        console.log('getListCategory:', res)
        this.types = res
        this.types[0].isActive = true
        this.getItemList(res[0].category_id)
      })
    },
    getItemList (category_id) {
      getItemList({ category_id }).then(res => {
        console.log('item list:', res)
        this.initList(res)
      })
    },
    initList (arr) {
      this.choosedIdList = []
      arr.forEach(item => {
        if (item.was_select) this.choosedIdList.push(item.item_id)
      })
      this.keys.forEach(key => {
        let filterArr = arr.filter(i => i.item_type === key)
        this.list[key].child = filterArr
      })
    }
  }
};
</script>

<style scoped>
.type-list {
  width: 93.6vw;
  padding: 3.2vw 0 5.33vw 0;
  border-radius: 2.13vw;
  background: #FEFFFE;
  margin: 0 auto 3.2vw;
}
.type-title {
  margin-bottom: 4.27vw;
  box-sizing: border-box;
  padding-left: 3.2vw;
  padding-right: 20px;
  line-height: 5.87vw;
  font-family: MicrosoftYaHei;
  font-size: 4.27vw;
  font-weight: normal;
  color: #3D3D3D;
}
.gray {
  color: #999!important;
}
.type-item {
  width: 82.93vw;
  height: 8.53vw;
  margin: 0 auto 1.07vw;
  text-align: center;
  line-height: 8.53vw;
  border-radius: 1.07vw;
  background: #FFFFFF;
  box-sizing: border-box;
  border: 1px solid #E6E6E6;
  font-family: Source Sans Pro;
  font-size: 3.2vw;
  font-weight: 600;
  color: #333333;
}
.type-item.active {
  color: #0A67FF;
  background: rgba(10, 103, 255, 0.1);
  border: 1px solid #0A67FF;
}
.camera-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 16.53vw;
  width: 93.33vw;
  border-radius: 2.13vw;
  margin: 0 auto 5.33vw;
  padding: 0 4.27vw;
  background: #FFFFFF;
  box-sizing: border-box;
  border: 0.5px solid #E9E9E9;
  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);
  font-family: Source Sans Pro;
  font-size: 3.73vw;
  font-weight: bold;
  color: #333333;
}
.text {
  position: relative;
  padding: 0 4.8vw;
  top: -0.4vw;
  font-family: Source Han Sans CN;
  font-size: 3.2vw;
  font-weight: normal;
  color: #333333;
}
.active .text {
  color: #0a67ff;
}
.img {
  width: 26.67vw;
  height: 26.67vw;
}
.camera-config {
  padding-top: 5.33vw;
}
.list {
  display: flex;
  padding-left: 3.2vw;
  overflow-x: scroll;
}
.item {
  height: 8.53vw;
  flex-shrink: 0;
  text-align: center;
  line-height: 8.53vw;
  margin-right: 2.13vw;
  margin-bottom: 4.27vw;
  border-radius: 1.07vw;
  box-sizing: border-box;
  background: #FFFFFF;
  border: 1px solid #E6E6E6;
}
.item.active {
  background: rgba(10, 103, 255, 0.1);
  border: 1px solid #0A67FF;
}
.item.active .text {
  color: #0A67FF;
}

.red-text {
  color: #EE0A24;
}
</style>